<template>
    <el-drawer
            class="history-dialog-drawer"
            size="600px"
            :wrapperClosable="false"
            :visible.sync="visible"
            direction="rtl"
            :before-close="historyHandleClose">
        <div slot="title" style="margin:0 auto;font-size:16px;">历史记录<span
                class="fontGrey">({{chat&&chat.friendNick}})</span>
        </div>
        <div v-if="chat" class="history-dialog-drawer-main">
            <div style="padding:10px 20px">
                <input style="width:100%;height: 32px;border-radius: 3px;padding: 5px 10px;box-sizing: border-box;font-size: 14px;border: 1px solid #ccc;background: #eee;"
                       placeholder="搜索"/>
            </div>
            <div class="layui-tab layui-tab-brief flex-column" style="height:100%">
                <ul class="layui-tab-title flex-row" style="justify-content: center">
                    <li @click="historyFilterChange(0)" class="layui-this">全部</li>
                    <li @click="historyFilterChange(1)">文件</li>
                    <li @click="historyFilterChange(2)">图片与视频</li>
                    <li @click="historyFilterChange(3)">链接</li>
                </ul>
                <div class="layui-tab-content" style="padding:0;height:100%" v-loading="chatsFetching&&pageNo===0">
                    <div class="layui-tab-item layui-show" style="height:100%">
                        <div v-infinite-scroll="load" style="height:100%;padding:12px 24px;overflow:auto"
                             class="scroller infinite-list">
                          <messageFall :account="account" :data="messages" :chat="chat" @groupReply="$emit('groupReply',$event)" @atUser="$emit('atUser',$event)"></messageFall>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </el-drawer>
</template>
<script>
    import {mapActions} from 'vuex'
    import messageFall from '@/views/service/message-fall';

    export default {
        name: 'dialog-history',
        props: {chat: {type: Object}, account: {type: Object},visible:{type:Boolean,default:false}},
        components:{messageFall},
        data() {
            return {
                historyFilterType: '',
                chatsFetching: false,

                pageNo: 0,
                pageSize: 20,

                data: []
            }
        },
        computed: {
            messages() {
              const historyFilterType = this.historyFilterType
              const messages = this.data 
              if(historyFilterType == 1){
                return messages.filter(message=>{
                  return  message.content.msgtype === 6
                }) 
              }
              if(historyFilterType == 2){
                return messages.filter(message=>{
                  return  message.content.msgtype === 2 || message.content.msgtype === 4
                }) 
              }
              if(historyFilterType == 3){
                return messages.filter(message=>{
                  return  message.content.msgtype === 10
                }) 
              }
              return messages
              
            }
        },
        watch:{
          chat(newChat={},oldChat={}){
            if( newChat.id != oldChat.id){
              this.data = []
              this.pageNo = 0
              this.chatsFetching = false
              this.historyFilterType = 0
            }
          },
          visible(val,oldVal){
            if(val !== oldVal && val === true){
              this.requestMessages() 
            }
          }
        },
        methods: {
            ...mapActions(['requestMessageMap']),
            historyHandleClose(done) {
              this.$emit('update:visible', !this.visible)
            },
            historyFilterChange(value) {
                this.historyFilterType = value
            },
            load() {
                this.requestMessages()
            },
            async requestMessages() {
                if (this.chatsFetching) return;

                const {friendwxid, wxaccount, csid} = this.chat
                const params = {
                    accountWxId: wxaccount,
                    friendWxid: friendwxid,
                    csId: csid, pageNo: this.pageNo + 1, pageSize: 20
                }
                try {
                    this.chatsFetching = true
                    let rs = await this.requestMessageMap(params)

                    rs = rs.map(item=>{
                      let _content = typeof item.content === 'string'?JSON.parse(item.content):item.content
                      item.content = _content
                      return item
                    })

                    if (params.pageNo === 1) {
                        this.data = rs.reverse()
                    } else {
                        this.data = this.data.concat(rs.reverse())
                    }
                    this.pageNo += 1
                } catch (error) {
                    console.log(error)
                }
                this.chatsFetching = false
            }

        }
    }
</script>
<style scoped>

</style>